Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design changes for Renku 2.0 #3214

Merged
merged 42 commits into from
Jul 30, 2024
Merged

Design changes for Renku 2.0 #3214

merged 42 commits into from
Jul 30, 2024

Conversation

lorenzo-cavazzi
Copy link
Member

@lorenzo-cavazzi lorenzo-cavazzi commented Jun 19, 2024

Revamp the design, dropping most of the old Bootstrap customization used for v1 in favor of a new minimal set of customizations and dropping a bunch of custom components in favor of standard Bootstrap components.

Mind that this also impacts v1 for a few shared components. E.G. alerts, 404/error pages, ...
Some shared components still need to be re-implemented (E.G. in the project settings page), but there will soon be a follow-up PR.

Notion page reference

image

/deploy

@RenkuBot
Copy link
Contributor

You can access the deployment of this PR at https://renku-ci-ui-3214.dev.renku.ch

lorenzo-cavazzi and others added 2 commits July 18, 2024 22:31
* remove v1 Bootstrap customization and add minimal styling to Bootstrap components.
* swap components with custom CSS classes for standard Bootstrap components.
* remove or modify a few interactions on the landing page and the project page

---------

Co-authored-by: Andrea Cordoba <[email protected]>
@lorenzo-cavazzi lorenzo-cavazzi marked this pull request as ready for review July 18, 2024 20:39
@lorenzo-cavazzi lorenzo-cavazzi requested a review from a team as a code owner July 18, 2024 20:39
@lorenzo-cavazzi lorenzo-cavazzi force-pushed the lorenzo/bootstrap-design branch from 1f3b742 to 6657e30 Compare July 18, 2024 20:43
@leafty leafty self-assigned this Jul 22, 2024
Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some early comments about bootstrap icons and overrides.

client/public/static/public/img/logo-yellow.svg Outdated Show resolved Hide resolved
client/src/styles/renku_bootstrap_customization.scss Outdated Show resolved Hide resolved
client/src/styles/renku_additional_classes.scss Outdated Show resolved Hide resolved
client/src/styles/renku_bootstrap_customization.scss Outdated Show resolved Hide resolved
client/src/styles/renku_bootstrap_customization.scss Outdated Show resolved Hide resolved
Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More comments.

client/src/components/Alert.jsx Show resolved Hide resolved
client/src/components/Alert.jsx Outdated Show resolved Hide resolved
client/src/components/ExternalLinks.tsx Outdated Show resolved Hide resolved
client/src/components/Logs.tsx Outdated Show resolved Hide resolved
client/src/components/Logs.tsx Outdated Show resolved Hide resolved
client/src/components/buttons/Button.tsx Show resolved Hide resolved
client/src/components/buttons/Button.tsx Outdated Show resolved Hide resolved
client/src/components/buttons/Button.tsx Outdated Show resolved Hide resolved
client/src/error-boundary/ErrorBoundary.tsx Outdated Show resolved Hide resolved
@lorenzo-cavazzi
Copy link
Member Author

@andre-code thank you for your review!

For all your comments, I've either 1) addressed it or 2) added it to the second round of design changes or 3) added an inline comment (below this message for non-inline comments). Please give it a look.


1, 2: Done

  1. Consider adjusting the off-canvas size for the session view [...]

Currently, all the off-canvas elements have the same width. Making it larger for sessions won't help much -- we have a lot of vertical content, but expanding horizontally won't fit more elements and users will need to scroll anyway. For this reason, I prefer to keep it consistent with all the other off-canvas. We can revise this later if we wish to re-think how we display the content there.

  1. In the session off-canvas, consider including the code repository permission information [...]

The space there seems a little limited to add more info. We could think about opening the Code repositories off-canvas on click. If we do that, we should add the same interaction for the other elements on the page (data source, launcher, ...). I would rather discuss this change with the product team since it will require a bit of work.

5: That's planned for the second round of design changes.

6, 7, 8, 9: Good point! I'll check into those with Jimena during the second round of design changes. Thank you for bringing those up!

  1. Done

  2. I would rather rework both the "Launched Sessions" and "Session Environment" sections separately; I agree the current output might be a little confusing to the users, but the restyle PR might not be the best place to change the content there.

Copy link
Member

@leafty leafty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some thing I noted from the deployment:

  1. The icon used in the new Alert components should be aligned to the top. If the content of the alert is large, then the icon floats too much in the middle
    Screenshot 2024-07-29 at 16 00 53
    Screenshot 2024-07-29 at 15 59 59

  2. The small avatar should be used for project members:
    Screenshot 2024-07-29 at 16 04 13

Otherwise the changes look good, and any more adjustment can be done later.

@lorenzo-cavazzi
Copy link
Member Author

@leafty
For the avatar, there was a discussion and we postponed the decision to the second iteration. I think we should leave this as is since we will address it soon; the alternative would be temporarily removing the avatar also from the other places.

For the alerts, we considered that the content is unlikely to be very long. In principle, I agree with your comment and I will bring this up again, but I would rather address this later since the topic has been discussed already and there are a few other details we would like to address for the alerts (E.G. using non-filled icons and match the color we use for the text)

Copy link
Contributor

@andre-code andre-code left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@lorenzo-cavazzi lorenzo-cavazzi merged commit af7f529 into main Jul 30, 2024
18 checks passed
@lorenzo-cavazzi lorenzo-cavazzi deleted the lorenzo/bootstrap-design branch July 30, 2024 09:05
@RenkuBot
Copy link
Contributor

Tearing down the temporary RenkuLab deplyoment for this PR.

lorenzo-cavazzi added a commit to SwissDataScienceCenter/renku that referenced this pull request Aug 6, 2024
New design for Renku 2.0 pages based on Bootstrap v5.3 components
SwissDataScienceCenter/renku-ui#3214
aledegano added a commit to SwissDataScienceCenter/renku that referenced this pull request Aug 12, 2024
* chore: Update changelog title for 0.56.0 release

* refactor: revamp design for Renku 2.0 (#3726)

New design for Renku 2.0 pages based on Bootstrap v5.3 components
SwissDataScienceCenter/renku-ui#3214

* feat: upgrade Amalthea to 0.12.2 (#3724)

Co-authored-by: Alessandro Degano <[email protected]>

* feat!: add platform configuration (#3716)

---------

Co-authored-by: Lorenzo Cavazzi <[email protected]>
Co-authored-by: Alessandro Degano <[email protected]>
Co-authored-by: Flora Thiebaut <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants